<template>
	<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#0d335d"
	 text-color="#fff" active-text-color="#ffd04b" :collapse="isopen">
		<template v-for="menu in menulist">
			<el-submenu :index="menu.path" :key="menu.id" v-if="(menu.children.length>0) && (menu.path!=='')">
				<template slot="title">
					<i :class="menu.icon"></i>
					<span slot="title">{{menu.name}}</span>
				</template>

				<router-link v-for="item in menu.children" :to="item.path">
					<el-menu-item :index="item.path" :key="item.id" @click="showTab(item.name,item.path)">
						{{item.name}}
					</el-menu-item>
				</router-link>
			</el-submenu>
			<router-link v-else-if="menu.path!==''" :to="
					 menu.path">
				<el-menu-item :index="menu.path" :key="menu.id" @click="showTab(menu.name,menu.path)">
					<i :class=" menu.icon"></i>
					<span slot="title">{{menu.name}}</span>
				</el-menu-item>
			</router-link>
		</template>
	</el-menu>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	export default {
		name: 'MainMenu',
		props: [
			'isopen',
		],
		data() {
			return{
			}
		},

		methods: {
			handleOpen(key, keyPath) {
				// console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				// console.log(key, keyPath);
			},
			...mapMutations(['setActiveRoute', 'addTab']),
			showTab(name, path) {
				// this.setActiveRoute(path)
				// this.addTab(path)
			}
		},
		computed: {
			menulist() {
				return this.$store.state.maintabs.menuList;
			}
		}
		// created() {
		// 	this.menulist = this.$store.state.maintabs.menuList;
			
		// }

	}
</script>

<style lang="scss" scoped>
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: 400px;
	}
</style>
